import React, { Component } from 'react';
import { Table, Input, Layout, Divider, message, Modal, Button, notification, Select, Form } from 'antd';
import '../less/index.less';
import { inject, observer } from 'mobx-react';
import DeptDrawer from './DeptDrawer';
import OrgSelect from '../../components/OrgSelect';
import { PlusOutlined } from '@ant-design/icons';

const { Sider, Header, Content } = Layout;

@inject('store')
@observer
class Root extends Component {
  selectRef = React.createRef();
  state = { value: '', visible: false };

  addDeptHandler = (parentId, parentName) => {
    let orgId = this.selectRef.current.getFieldValue('orgId');
    this.props.store.showDeptDrawer({ orgId: orgId, parentId: parentId, parentName: parentName });
  };
  /**
   * 删除部门响应函数
   * @param record 部门记录
   */
  deleteDeptHandler = record => {
    let that = this;
    Modal.confirm({
      title: '确认删除【' + record.name + '】吗？',
      async onOk() {
        await that.props.store.deleteDept(record);
      },
    });
  };

  editDeptHandler = record => {
    this.props.store.showDeptDrawer(record);
  };

  searchDeptHandler = name => {
    let orgId = this.selectRef.current.getFieldValue('orgId');
    this.props.store.searchDept(orgId, name);
  };

  orgOnload = data => {
    this.selectRef.current.setFieldsValue({ orgId: data.row.id });
    this.props.store.orgOnload(data.row);
    this.setState({ visible: data.visible });
  };

  orgSelect = value => {
    this.props.store.selectOrg(value);
    this.selectRef.current.setFieldsValue({ orgId: value });
  };

  expandRow = (expanded, record) => {
    this.props.store.expandRow(expanded, record);
  };


  render() {
    const { store } = this.props;

    let columns = [
      { title: '部门名称', dataIndex: 'name', key: 'name', width: 400 },
      { title: '部门代码', dataIndex: 'code', key: 'code', width: 150 },
      { title: '部门描述', dataIndex: 'remark', key: 'remark' },
      { title: '部门类型', dataIndex: 'typeName', key: 'typeName', width: 150 },
      {
        title: '操作', width: 200, align:'center', render: (text, record) => {
          let disabled = record.isFixed ? 'disabled' : null;
          return (<span>
            <a onClick={() => this.addDeptHandler(record.id, record.name)}>新建下级部门</a>
            <Divider type="vertical"/>
            <a onClick={() => this.editDeptHandler(record)}>编辑</a>
            <Divider type="vertical"/>
            <a disabled={disabled} onClick={() => this.deleteDeptHandler(record)}>删除</a>
          </span>);
        },
      }];
    return (
      <Layout className='layout'>
        <Header className='header'>
          <Button type='primary' icon={<PlusOutlined/>} onClick={() => this.addDeptHandler()}>新建部门</Button>
          <Form style={{ float: 'right' }} ref={this.selectRef} layout='inline'>
            <Form.Item name='orgId' label='所属机构' noStyle={!this.state.visible}>
              <OrgSelect style={{width: 200}} onSelect={key => this.orgSelect(key)} onload={data => this.orgOnload(data)}/>
            </Form.Item>

            <Form.Item>
              <Input.Search placeholder="部门名称"
                            onSearch={name => this.searchDeptHandler(name)}/>
            </Form.Item>
          </Form>
        </Header>
        <Content className='content'>
          <Table rowKey="id" size={'middle'} loading={store.deptListData.loading}
                 expandedRowKeys={store.deptListData.expandedKeys.slice()} onExpand={this.expandRow}
                 dataSource={store.deptListData.dataSource} columns={columns}
                 pagination={false}/>
          <DeptDrawer/>
        </Content>
      </Layout>
    );
  }
}

export default Root;
